import React, { ChangeEvent, FC, useEffect, useState } from "react";
import { Input } from "antd";
import { useNavigate, useLocation,useSearchParams } from "react-router-dom";
import { LIST_SEARCH_PARAM_KEY } from "../constant";
const { Search } =Input
const QuestionSearch: FC = () => {
    const nav = useNavigate()
    const { pathname } = useLocation()
    const [searchParams] = useSearchParams()
    //将url最新的search同步到搜索框
    useEffect(() => {
        const currentVal = searchParams.get(LIST_SEARCH_PARAM_KEY) || ''
        setSearchVal(currentVal)
    },[searchParams])
    const [searchVal, setSearchVal] = useState('')
    const handleChange = (event:ChangeEvent<HTMLInputElement>) => {
        setSearchVal(event.target.value)
    }

    const searchHandle = (searchVal:string) => {
        nav({
            pathname: pathname,
            search:`${LIST_SEARCH_PARAM_KEY}=${searchVal}`
        })
    }

    return <>
    <Search  placeholder="请输入要搜索的问卷" allowClear onChange={handleChange} onSearch={searchHandle} style={{width:'220px'}}/>
    </>
}
export default QuestionSearch